<template>
	<view class="home">
	  <view class="title">你已经获胜 <text style="color:red">{{victory}}</text> 次</view>
	  <view class="relut">
		 <image :src="`../../static/${list[rightIndex]}.png`" mode="widthFix"></image>
		 <text>看结果</text>
		 <image :src="`../../static/${checkImg}.png`" mode="widthFix"></image>
	  </view>
	  <view class="content">
		 <view class="title">出拳吧，骚年！</view>
		 <view class="img_ct">
			<image @tap="checkBtn(index)" v-for="(item,index) in list" :key="index" :src="`../../static/${item}.png`" mode="widthFix"></image>
		 </view>
		 <button @tap="again">再来一次</button>
		 <button @tap="clear">c</button>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  list:['bu','jiandao','shitou'],
			  victory: 0,
			  rightIndex: 0,
			  checkImg: 'wenhao',
			  time:null
			}
		},
		onLoad() {
         this.start()
		},
		methods: {
          start(){
			this.time = setInterval(()=>{
			  this.rightIndex = this.rightIndex == 2 ? 0 : this.rightIndex+=1;
			},300)
		  },
		  checkBtn(i){
			this.checkImg = this.list[i];
			clearInterval(this.time);
			let result = i - this.rightIndex;
			if (result == 1 || result == -2){
			  this.victory++;
			}
		  },
		  again(){
			this.checkImg = "wenhao";
			this.start();
		  },
		  clear(){
			this.victory = 0;
			this.again();
		  }
		}
	}
</script>

<style lang="scss" scoped>
  .title{
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
  }
  .home{
	height: 100vh;
	background-color: #f8e65d;
  }
  .relut{
	display: flex;
	justify-content: center;
	align-items: center;
	image{
	  width: 200rpx;
	}
	text {
	  margin: 0 30rpx;
	  color: red;
	}
  }
  .content{
	background-color: #fff;
	width: 90%;
	margin: 60rpx auto;
	padding-bottom: 30rpx;
	.title{
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	}
  }
  .img_ct{
	display: flex;
	justify-content: center;
	image{
	  width: 160rpx;
	  border-radius: 50%;
	  margin-right: 30rpx;
	}
  }
  button{
	width: 80%;
	margin: 30rpx auto;
	background-color: #f8e65d;
  }
</style>
